<template>
	<uni-popup ref="popup" type="bottom" @change="onPopupChange">
		<view class="comment-container">
			<view class="comment-header">
				<text class="comment-title">{{totalComments}}条评论</text>
				<view class="close-btn" @click="close">
					<uni-icons type="closeempty" size="24" color="#999"></uni-icons>
				</view>
			</view>
			
			<scroll-view 
				class="comment-list" 
				scroll-y 
				@scrolltolower="loadMoreComments"

			>
				<view class="comment-item" v-for="(comment, index) in commentList" :key="comment.id">
					<image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
					<view class="comment-content">
						<view class="comment-info">
							<text class="comment-username">{{comment.username}}</text>
							<text class="comment-time">{{comment.time}}</text>
						</view>
						<text class="comment-text">{{comment.content}}</text>
						<view class="comment-actions">
							<view class="action-item" @click="toggleCommentLike(comment)">
								<uni-icons :type="comment.isLiked ? 'heart-filled' : 'heart'" size="16" :color="comment.isLiked ? '#ff0000' : '#999'"></uni-icons>
								<text class="action-count">{{comment.likes}}</text>
							</view>
							<view class="action-item" @click="showReplyInput(comment)">
								<uni-icons type="chat" size="16" color="#999"></uni-icons>
								<text class="action-count">{{comment.totalReplies || 0}}</text>
							</view>
						</view>
						
						<!-- 回复列表 -->
						<view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
							<view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
								<view class="reply-content">
									<text class="reply-username">{{reply.username}}</text>
									<text v-if="reply.replyTo" class="reply-to">回复</text>
									<text v-if="reply.replyTo" class="reply-to-username">{{reply.replyTo}}</text>
									<text class="reply-text">：{{reply.content}}</text>
								</view>
								<view class="reply-actions">
									<view class="action-item" @click="toggleReplyLike(comment, reply)">
										<uni-icons :type="reply.isLiked ? 'heart-filled' : 'heart'" size="14" :color="reply.isLiked ? '#ff0000' : '#999'"></uni-icons>
										<text class="action-count">{{reply.likes}}</text>
									</view>
									<view class="action-item" @click="showReplyInput(comment, reply)">
										<uni-icons type="chat" size="14" color="#999"></uni-icons>
									</view>
								</view>
							</view>
							<view class="load-more-replies" v-if="comment.totalReplies > comment.replies.length" @click="loadMoreReplies(comment)">
								<text>展开{{comment.totalReplies - comment.replies.length}}条回复</text>
								<uni-icons type="bottom" size="12" color="#999"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 评论输入框 -->
			<view class="comment-input-container">
				<input 
					class="comment-input" 
					type="text" 
					v-model="inputContent" 
					:placeholder="inputPlaceholder"
					@focus="onInputFocus"
					@blur="onInputBlur"
				/>
				<button 
					class="send-btn" 
					:disabled="!inputContent.trim()"
					@click="sendComment"
				>发送</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'douyinComment',
		props: {
			videoId: {
				type: [String, Number],
				required: true
			},
			initialComments: {
				type: Array,
				default: () => []
			},
			totalComments: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				commentList: [],
				inputContent: '',
				inputPlaceholder: '说点什么...',
				scrollHeight: 0,
				replyingTo: null,
				replyingComment: null
			}
		},
		watch: {
			initialComments: {
				handler(newVal) {
					this.commentList = newVal;
				},
				immediate: true
			}
		},
		methods: {
			open() {
				this.$refs.popup.open();
				this.calculateScrollHeight();
			},
			close() {
				this.$refs.popup.close();
				this.inputContent = '';
				this.replyingTo = null;
				this.replyingComment = null;
				this.$emit('close');
			},
			onPopupChange(e) {
				if (!e.show) {
					this.close();
				}
			},
			calculateScrollHeight() {
				// 计算滚动区域高度
				const systemInfo = uni.getSystemInfoSync();
				const windowHeight = systemInfo.windowHeight;
				this.scrollHeight = windowHeight - 120; // 减去头部和输入框高度
			},
			showReplyInput(comment, reply = null) {
				this.replyingComment = comment;
				this.replyingTo = reply;
				this.inputPlaceholder = reply ? `回复 ${reply.username}` : '说点什么...';
				this.inputContent = '';
			},
			onInputFocus() {
				// 处理输入框获得焦点时的逻辑
			},
			onInputBlur() {
				// 处理输入框失去焦点时的逻辑
			},
			sendComment() {
				if (!this.inputContent.trim()) return;
				
				const commentData = {
					content: this.inputContent,
					replyTo: this.replyingTo ? this.replyingTo.username : null,
					commentId: this.replyingComment ? this.replyingComment.id : null
				};
				
				this.$emit('comment-added', commentData);
				this.inputContent = '';
				this.replyingTo = null;
				this.replyingComment = null;
				this.inputPlaceholder = '说点什么...';
			},
			toggleCommentLike(comment) {
				comment.isLiked = !comment.isLiked;
				comment.likes += comment.isLiked ? 1 : -1;
				this.$emit('comment-liked', {
					commentId: comment.id,
					isLiked: comment.isLiked
				});
			},
			toggleReplyLike(comment, reply) {
				reply.isLiked = !reply.isLiked;
				reply.likes += reply.isLiked ? 1 : -1;
				this.$emit('reply-liked', {
					commentId: comment.id,
					replyId: reply.id,
					isLiked: reply.isLiked
				});
			},
			loadMoreComments() {
				this.$emit('load-more', {
					page: Math.ceil(this.commentList.length / 10),
					pageSize: 10
				});
			},
			loadMoreReplies(comment) {
				this.$emit('load-more-replies', {
					commentId: comment.id,
					currentReplies: comment.replies.length,
					totalReplies: comment.totalReplies
				});
			}
		}
	}
</script>

<style>
	.comment-container {
        height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.comment-title {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.close-btn {
		padding: 10rpx;
	}
	
	.comment-list {
		padding: 20rpx;
	}
	
	.comment-item {
		display: flex;
		margin-bottom: 30rpx;
	}
	
	.comment-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.comment-content {
		flex: 1;
	}
	
	.comment-info {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.comment-username {
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}
	
	.comment-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.comment-text {
		font-size: 28rpx;
		line-height: 1.5;
		margin-bottom: 20rpx;
	}
	
	.comment-actions {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.action-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}
	
	.action-count {
		font-size: 24rpx;
		color: #999;
		margin-left: 10rpx;
	}
	
	.reply-list {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 10rpx;
	}
	
	.reply-item {
		margin-bottom: 20rpx;
	}
	
	.reply-content {
		font-size: 26rpx;
		line-height: 1.5;
	}
	
	.reply-username {
		font-weight: bold;
	}
	
	.reply-to {
		color: #999;
		margin: 0 10rpx;
	}
	
	.reply-to-username {
		color: #666;
	}
	
	.reply-actions {
		display: flex;
		margin-top: 10rpx;
	}
	
	.load-more-replies {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 24rpx;
		padding: 10rpx 0;
	}
	
	.comment-input-container {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #f5f5f5;
	}
	
	.comment-input {
		flex: 1;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
	}
	
	.send-btn {
		width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #ff0000;
		color: #fff;
		border-radius: 40rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	
	.send-btn[disabled] {
		background-color: #ff9999;
	}
</style> 